<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Badge - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Badge - Basic</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">
        <ion-list>
          <ion-list-header>
            <ion-label> Badges Right </ion-label>
          </ion-list-header>
          <ion-item>
            <ion-label>Default Badge</ion-label>
            <ion-badge slot="end">00</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Primary Badge</ion-label>
            <ion-badge slot="end" color="primary">11</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Secondary Badge</ion-label>
            <ion-badge slot="end" color="secondary">22</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Tertiary Badge</ion-label>
            <ion-badge slot="end" color="tertiary">33</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Success Badge</ion-label>
            <ion-badge slot="end" color="success">44</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Warning Badge</ion-label>
            <ion-badge slot="end" color="warning">55</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Danger Badge</ion-label>
            <ion-badge slot="end" color="danger">66</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Light Badge</ion-label>
            <ion-badge slot="end" color="light">77</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Medium Badge</ion-label>
            <ion-badge slot="end" color="medium">88</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Dark Badge</ion-label>
            <ion-badge slot="end" color="dark">99</ion-badge>
          </ion-item>
          <ion-item onclick="toggleColor()">
            <ion-badge id="toggleColor" slot="end" color="primary">primary</ion-badge>
            <ion-label>Dynamic Badge Color (toggle)</ion-label>
          </ion-item>
        </ion-list>

        <ion-list>
          <ion-list-header>
            <ion-label> Badges Left </ion-label>
          </ion-list-header>
          <ion-item>
            <ion-label>Default Badge</ion-label>
            <ion-badge slot="start">00</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Primary Badge</ion-label>
            <ion-badge slot="start" color="primary">11</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Secondary Badge</ion-label>
            <ion-badge slot="start" color="secondary">22</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Tertiary Badge</ion-label>
            <ion-badge slot="start" color="tertiary">33</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Success Badge</ion-label>
            <ion-badge slot="start" color="success">44</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Warning Badge</ion-label>
            <ion-badge slot="start" color="warning">55</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Danger Badge</ion-label>
            <ion-badge slot="start" color="danger">66</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Light Badge</ion-label>
            <ion-badge slot="start" color="light">77</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Medium Badge</ion-label>
            <ion-badge slot="start" color="medium">88</ion-badge>
          </ion-item>
          <ion-item>
            <ion-label>Dark Badge</ion-label>
            <ion-badge slot="start" color="dark">99</ion-badge>
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-app>

    <script>
      const badge = document.querySelector('#toggleColor');

      function toggleColor() {
        const prev = badge.getAttribute('color');
        badge.setAttribute('color', prev === 'secondary' ? 'primary' : 'secondary');
        badge.innerHTML = prev === 'secondary' ? 'primary' : 'secondary';
      }
    </script>
  </body>
</html>
